<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#fk{
			width: 1200px;
			height: 535px;
			border: 5px solid blue;
			margin: 20px auto;
			position: relative;
		}
		#fk img{
			position: absolute;
			top: 0px;
			left: 0px;
			display: none;
		}
		#fk ul{
			position: absolute;
			left: 548px;
			bottom: 23px;
		}
		#fk ul li{
			list-style: none;
			width: 12px;
			height: 12px;
			background: black;
			float: left;
			margin-right: 8px;
			border-radius: 50%;
		}
	</style>
	<script src="jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//2.声明一个大总管变量
			var c = 0;
			//1.加一个定时器
			function run(){
				c++;
				document.title = c;
				//5.加上判断 让c回来
				c = (c==5) ? 0 : c;
				//3.图片动起来 show(),hide()比较死板
				$('#fk img').eq(c).fadeIn(500).siblings('img').fadeOut(500);
				//4.小圆点动起来
				$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'black'});
			}
			
			var timer = setInterval(run,1000);
			
			//6.鼠标移入事件 onmouseover->mouseenter  onmouseout->mouseleave
			$('#fk ul li').mouseenter(function(){
				//7.清除定时器
				clearInterval(timer);
				//8.获取当前序号 覆盖原来自增的num
				c = $(this).index();
				//9.10.  注：加上stop停止上一次的动画
				$('#fk img').eq(c).stop().fadeIn(500).siblings('img').stop().fadeOut(500);
				$('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'black'});
			})
			
			//11.移除事件
			$('#fk ul li').mouseleave(function(){
				//12.恢复定时器
				timer = setInterval(run,1000);
			})
		})
	</script>
	</head>
	<body>
		
		<div id="fk">
			<img src="images/1.jpg" style="display: block;" />
			<img src="images/2.jpg" />
			<img src="images/3.jpg" />
			<img src="images/4.jpg" />
			<img src="images/5.jpg" />
			<ul>
				<li style="background: #A10000;"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		
		
	</body>
</html>
